<template>
  <div>
    <ul>
      <li v-for="item in person">
        <p>姓名：{{item.name}}</p>
        <p>年龄：{{ item.age }}</p>
      </li>
    </ul>
  </div>
  <table border=1>
    <tr>
      <td>用户借款编号</td>
      <td>借款用户账号</td>
      <td>借款项名称</td>
      <td>借款金额</td>
      <td>剩余还款金额</td>
    </tr>
    <tr v-for="item in userList">
      <td>{{item.id}}</td>
      <td>{{item.Jname}}</td>
      <td>{{item.Jobj}}</td>
      <td>{{item.Jmoney}}</td>
      <td>{{item.Smoney}}</td>
    </tr>
  </table>
  <input type="text" v-model="stname" />
  <p>{{stname}}</p>
</template>

<script setup lang="ts">
  import {reactive,ref,toRefs} from 'vue'
  let data= reactive({
    person:[{
      name:"张大",
      age:21
    },
    {
      name:"李尔",
      age:20
    },
    {
      name:"刘珊",
      age:22
    },
    {
      name:"钱嗣",
      age:25
    },
    {
      name:"赵武",
      age:24
    }]
  })
  let data1=reactive({
    userList:[{
      id:1,
      Jname:"zhangsan",
      Jobj:"八位助学金",
      Jmoney:200000,
      Smoney:10000
    },
    {
      id:2,
      Jname:"zhangsan",
      Jobj:"八位助学金",
      Jmoney:400,
      Smoney:0
    }]
  })
  let stname = ref("李四")
  let{person}=toRefs(data)
  let{userList} =toRefs(data1)
</script>

<style scoped>

</style>  